<template>
  <div class="white-box"  v-loading.fullscreen="loading">
    <el-alert title="提示:" type="info" style="margin-bottom: 20px">
      在系统运营中，我们建议商家运营收入，至少要超过80%的收入为实物商品交易，坚决禁止拉人头，靠注册返佣为模式的商城运营；
      <br>
      如果设置中按照利润计算佣金的配置关闭了，则佣金总比例之和不能大于50%，也就是佣金比例<=50%，否则会被列为有传销的嫌疑，请商家注意设置确认。
    </el-alert>
    <div class="">
      <el-form ref="formRef" :model="formData" :rules="formRule" label-width="150px">
        <title-more title="分销商设置"></title-more>
        <div class="form-box">
          <el-form-item label="直接上级佣金比例" prop="directCommission">
            <el-input-number v-model="formData.directCommission" :min="0.01" :max="100" controls-position="right"  :precision="2" :step="0.1">
              <template #suffix>
                <span>%</span>
              </template>
            </el-input-number>
            <el-text style="margin-left: 20px">分销商推荐买家购买后能拿到的佣金比例</el-text>
          </el-form-item>
        </div>
        <div class="form-box">
          <el-form-item label="是否开启二级分销" prop="status">
            <div style="width: 100%">
              <el-switch v-model="formData.status" inline-prompt active-text="已开启" inactive-text="关闭" :active-value="1" :inactive-value="0"/>
              <br>
              <el-text>系统默认为一级分销，在分销商管理和手机端的分销中心查看下级会员和分销商时将显示的是直属下级的会员和分销商，其他都不显示;</el-text>
              <br>
              <el-text>开启二级分销，显示的将是直属下级、间接下级的会员和分销商，其他都不显示，以此类推。</el-text>
            </div>
          </el-form-item>
          <el-form-item label="间接上级佣金比例" prop="indirectCommission">
            <el-input-number v-model="formData.indirectCommission" :min="0.01" :max="100" controls-position="right"  :precision="2" :step="0.1">
              <template #suffix>
                <span>%</span>
              </template>
            </el-input-number>
            <el-text style="margin-left: 20px">分销商推荐买家购买后，分销商的上级分销商能拿到的佣金比例</el-text>
          </el-form-item>
        </div>
        <div class="foot-btn flexs-center">
          <el-button type="primary" size="large" :loading="btnLoading" @click="submitForm(formRef)">确定修改</el-button>
        </div>
      </el-form>

    </div>



  </div>
</template>

<script setup>
import {getCurrentInstance, ref, onMounted, onBeforeUnmount, reactive} from "vue"
import { useRouter,useRoute } from "vue-router"
import LoadingSmall from "@components/LoadingSmall.vue"
import GoBack from "@components/GoBack.vue"
import TitleMore from "@components/title-more.vue";
const router = useRouter()
const route = useRoute()
const sid = route.query.sid || ""
const { proxy } = getCurrentInstance()

const btnLoading = ref(false)
const loading = ref(false)
const formRef = ref(null)
const formData = reactive({
  indirectCommission: '',
  directCommission:'',
  status:''
})
const formRule = reactive({
  indirectCommission: [{required: true, message: "请输入", trigger: "blur"}],
  directCommission: [{required: true, message: "请输入", trigger: "blur"}],
})
const selectOptions = reactive({
  dataScope:[
    {label:'全部',value:1},
  ],
})
const detail = reactive({})
onMounted(async () => {
  await getDetail()
})
const getDetail = async () =>{
  loading.value = true
  await proxy.$axios
      .get(`/distributor/commission`)
      .then((res) => {
        if (res.data.code == 200) {
          let result = res.data.data
          for (let key in formData) {
            formData[key] = result[key]
          }
          for (let key in result) {
            detail[key] = result[key]
          }
        } else {
          proxy.$message({message: res.data.msg, type: "error"})
        }
      }).catch((err) => {

      }).finally(()=>{
        loading.value = false
      })
}
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      btnLoading.value = true;
      let method = 'post';
      let url = '/distributor/commission';
      let sid = detail.sid;
      if(sid){
        method = 'put';
        url += `/${sid}`
      }
      proxy.$axios[method](url,formData)
          .then((res) => {
            btnLoading.value = false
            if (res.data.code == 200) {
              proxy.$message({message: "保存成功！", type: "success"})
            } else {
              proxy.$message({message: res.data.msg, type: "error"})
            }
          })
          .catch((err) => {
            btnLoading.value = false
          })
    }
  })
}
</script>
<script>
export default {
  name: "DistributorSetting",
}
</script>

<style lang="less" scoped>
.form-box{
  margin: 0 0 20px;
  padding: 20px 16px 1px;
  background: #f7f8fa;
}

</style>
